<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
                <el-form-item label="工单号" prop="工单号">
                    <el-input v-model="formData.工单号" clearable placeholder="请输入工单号" />
                </el-form-item>
                <el-form-item label="状态" prop="状态">
                    <el-input v-model="formData.状态" clearable placeholder="请输入状态" />
                </el-form-item>
                <el-form-item label="工单类型" prop="工单类型">
                    <el-input v-model="formData.工单类型" clearable placeholder="请输入工单类型" />
                </el-form-item>
                <el-form-item label="分配机构" prop="分配机构">
                    <el-input v-model="formData.分配机构" clearable placeholder="请输入分配机构" />
                </el-form-item>
                <el-form-item label="分配人员" prop="分配人员">
                    <el-input v-model="formData.分配人员" clearable placeholder="请输入分配人员" />
                </el-form-item>
                <el-form-item label="参与人员" prop="参与人员">
                    <el-input v-model="formData.参与人员" clearable placeholder="请输入参与人员" />
                </el-form-item>
                <el-form-item label="业务标识" prop="业务标识">
                    <el-input v-model="formData.业务标识" clearable placeholder="请输入业务标识" />
                </el-form-item>
                <el-form-item label="产品IMEI旧" prop="产品IMEI旧">
                    <el-input v-model="formData.产品IMEI旧" clearable placeholder="请输入产品IMEI旧" />
                </el-form-item>
                <el-form-item label="序列号旧" prop="序列号旧">
                    <el-input v-model="formData.序列号旧" clearable placeholder="请输入序列号旧" />
                </el-form-item>
                <el-form-item label="产品品牌" prop="产品品牌">
                    <el-input v-model="formData.产品品牌" clearable placeholder="请输入产品品牌" />
                </el-form-item>
                <el-form-item label="产品型号" prop="产品型号">
                    <el-input v-model="formData.产品型号" clearable placeholder="请输入产品型号" />
                </el-form-item>
                <el-form-item label="产品颜色" prop="产品颜色">
                    <el-input v-model="formData.产品颜色" clearable placeholder="请输入产品颜色" />
                </el-form-item>
                <el-form-item label="产品容量" prop="产品容量">
                    <el-input v-model="formData.产品容量" clearable placeholder="请输入产品容量" />
                </el-form-item>
                <el-form-item label="保单号" prop="保单号">
                    <el-input v-model="formData.保单号" clearable placeholder="请输入保单号" />
                </el-form-item>
                <el-form-item label="密码" prop="密码">
                    <el-input v-model="formData.密码" clearable placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="保修状态" prop="保修状态">
                    <el-input v-model="formData.保修状态" clearable placeholder="请输入保修状态" />
                </el-form-item>
                <el-form-item label="报修服务类型" prop="报修服务类型">
                    <el-input v-model="formData.报修服务类型" clearable placeholder="请输入报修服务类型" />
                </el-form-item>
                <el-form-item label="用户名称" prop="用户名称">
                    <el-input v-model="formData.用户名称" clearable placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="手机号码" prop="手机号码">
                    <el-input v-model="formData.手机号码" clearable placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="产品IMEI新" prop="产品IMEI新">
                    <el-input v-model="formData.产品IMEI新" clearable placeholder="请输入产品IMEI新" />
                </el-form-item>
                <el-form-item label="序列号新" prop="序列号新">
                    <el-input v-model="formData.序列号新" clearable placeholder="请输入序列号新" />
                </el-form-item>
                <el-form-item label="产品品牌新" prop="产品品牌新">
                    <el-input v-model="formData.产品品牌新" clearable placeholder="请输入产品品牌新" />
                </el-form-item>
                <el-form-item label="产品型号新" prop="产品型号新">
                    <el-input v-model="formData.产品型号新" clearable placeholder="请输入产品型号新" />
                </el-form-item>
                <el-form-item label="产品颜色新" prop="产品颜色新">
                    <el-input v-model="formData.产品颜色新" clearable placeholder="请输入产品颜色新" />
                </el-form-item>
                <el-form-item label="产品容量新" prop="产品容量新">
                    <el-input v-model="formData.产品容量新" clearable placeholder="请输入产品容量新" />
                </el-form-item>
                <el-form-item label="旧机回收价格" prop="旧机回收价格">
                    <el-input v-model="formData.旧机回收价格" clearable placeholder="请输入旧机回收价格" />
                </el-form-item>
                <el-form-item label="更换时间" prop="更换时间">
                    <el-input v-model="formData.更换时间" clearable placeholder="请输入更换时间" />
                </el-form-item>
                <el-form-item label="免赔价差" prop="免赔价差">
                    <el-input v-model="formData.免赔价差" clearable placeholder="请输入免赔价差" />
                </el-form-item>
                <el-form-item label="理赔额度" prop="理赔额度">
                    <el-input v-model="formData.理赔额度" clearable placeholder="请输入理赔额度" />
                </el-form-item>
                <el-form-item label="工单备注" prop="工单备注">
                    <el-input v-model="formData.工单备注" clearable placeholder="请输入工单备注" />
                </el-form-item>
                <el-form-item label="服务结果" prop="服务结果">
                    <el-input v-model="formData.服务结果" clearable placeholder="请输入服务结果" />
                </el-form-item>
                <el-form-item label="实收金额" prop="实收金额">
                    <el-input v-model="formData.实收金额" clearable placeholder="请输入实收金额" />
                </el-form-item>
                <el-form-item label="收款结果" prop="收款结果">
                    <el-input v-model="formData.收款结果" clearable placeholder="请输入收款结果" />
                </el-form-item>
                <el-form-item label="收款备注" prop="收款备注">
                    <el-input v-model="formData.收款备注" clearable placeholder="请输入收款备注" />
                </el-form-item>
                <el-form-item label="发货类型" prop="发货类型">
                    <el-input v-model="formData.发货类型" clearable placeholder="请输入发货类型" />
                </el-form-item>
                <el-form-item label="快递公司" prop="快递公司">
                    <el-input v-model="formData.快递公司" clearable placeholder="请输入快递公司" />
                </el-form-item>
                <el-form-item label="快递单号" prop="快递单号">
                    <el-input v-model="formData.快递单号" clearable placeholder="请输入快递单号" />
                </el-form-item>
                <el-form-item label="发货备注" prop="发货备注">
                    <el-input v-model="formData.发货备注" clearable placeholder="请输入发货备注" />
                </el-form-item>
                <el-form-item label="服务单状态" prop="服务单状态">
                    <el-input v-model="formData.服务单状态" clearable placeholder="请输入服务单状态" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="tbHxwtEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiTbHxwtAdd, apiTbHxwtEdit, apiTbHxwtDetail } from '@/api/tb_hxwt'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑投保换新工单' : '新增投保换新工单'
})

// 表单数据
const formData = reactive({
    id: '',
    工单号: '',
    状态: '',
    工单类型: '',
    分配机构: '',
    分配人员: '',
    参与人员: '',
    业务标识: '',
    产品IMEI旧: '',
    序列号旧: '',
    产品品牌: '',
    产品型号: '',
    产品颜色: '',
    产品容量: '',
    保单号: '',
    密码: '',
    保修状态: '',
    报修服务类型: '',
    用户名称: '',
    手机号码: '',
    产品IMEI新: '',
    序列号新: '',
    产品品牌新: '',
    产品型号新: '',
    产品颜色新: '',
    产品容量新: '',
    旧机回收价格: '',
    更换时间: '',
    免赔价差: '',
    理赔额度: '',
    工单备注: '',
    服务结果: '',
    实收金额: '',
    收款结果: '',
    收款备注: '',
    发货类型: '',
    快递公司: '',
    快递单号: '',
    发货备注: '',
    服务单状态: '',
})


// 表单验证
const formRules = reactive<any>({

})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    
    
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiTbHxwtDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData,  }
    mode.value == 'edit' 
        ? await apiTbHxwtEdit(data) 
        : await apiTbHxwtAdd(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
